<template>
	<div id="AccountManerge">
		<div id="tableList">
			<el-table :data="countId.data" slot="table" style="box-shadow: 0 0 15px lightgray;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="账号" align="center" prop="username">
				</el-table-column>
				<el-table-column label="密码" align="center">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="deleteUser(scope.row._id)" v-show="scope.row.username === 'admin'?false:true">删除</el-button>
					</template>
				</el-table-column>
				<el-table-column align="right">
					<template slot="header" slot-scope="scope" style="width: 2px; height: 2px;">
						<el-button icon="el-icon-plus" circle type="primary" size="mini" @click="showAdd = true"></el-button>
						<el-button icon="el-icon-minus" type="danger" circle size="mini" @click="showClose"></el-button>
					</template>

				</el-table-column>
				<el-pagination background layout="prev, pager, next"  :total="10">
				</el-pagination>
			</el-table>
			
		</div>
		<el-collapse-transition>
			<div id="addNews" v-show="showAdd">
				<div id="addInputBox">
					<el-form :model="accountInfo" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
						<el-form-item label="账号" prop="username" style="width: 350px;">
							<el-input type="text" v-model="accountInfo.username" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password" style="width: 350px;">
							<el-input type="password" v-model="accountInfo.password" autocomplete="off"></el-input>
						</el-form-item>
						<el-form-item>
							<div id="chekBox">
								<el-checkbox v-for="(item,index) in allRolles" :label="item.roleDesc" :key="item._id"></el-checkbox>
							</div>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="addUser">提交</el-button>
							<el-button type="danger" @click="cleanMessage">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-collapse-transition>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				rules: {
					username: [{
						required: true,
						message: "请输入账号",
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: "请输入密码",
						trigger: 'blur'
					}]
				},
				accountInfo: {
					roles: ['5d01fd27a90da519dcd4059a'],
				},
				showAdd: false,
				countId: [],
				roles: []
			}
		},
		methods: {
			showClose() {
				this.showAdd = false;
				this.$refs['ruleForm'].resetFields();
			},
			cleanMessage() {
				this.$refs['ruleForm'].resetFields();
			},
			async addUser() {
				var re = await this.$http.post(this.$apis.addNewAdmin, this.accountInfo)
				var success = re.data.success;
				if (success) {
					this.accountInfo = {
						roles: []
					}
					this.loadList("findAdmins", "countId");

				} else {
					this.tipsOpen()
				}
			},
			async deleteUser(id) {

				var action = () => {
					var re = this.$http.post(this.$apis.deleteUsers, {
						_id: id
					}).then(() => {
						this.loadList("findAdmins", "countId");
						console.log(re)
					})
				}
				this.deleteOpen(action, "永久删除该账号")
			},
			// addRoles(){
			// 	var newRole = this.accountInfo.roles

			// 	}
		},
		computed: {
			...mapState(["allRolles"])
		},
		async mounted() {
			this.loadList("findAdmins", "countId");
		},
	}
</script>

<style lang="scss" scoped>
	#AccountManerge {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100%;

		#btn {
			width: 5px;
			height: 5px;
		}

		#tableList {
			width: 50%;
			text-align: center;
		}

		#addNews {
			width: 40%;
			height: 300px;
			background: white;
			margin-left: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 15px lightgray;

			#addInputBox {
				width: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}

			#chekBox {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		// .fade-enter-active,.fade-leave-active{
		// 	transition: all 0.5s;
		// }
		// .fade-enter-to{
		// 	opacity:1;
		// 	transform: translateX(200px);
		// }
		// .fade-leave-to{
		// 	opacity:1;
		// 	transform: translateY(-525px);
		// }
	}
</style>
